<template>
  <div class="footprint-page" id="footprint-page">
    <n-tabs
      v-model:value="queryForm.categoryId"
      type="line"
      @update:value="tabChange"
    >
      <n-tab-pane
        v-for="item in classify"
        :key="item.id"
        :name="item.id"
        :tab="item.name"
      ></n-tab-pane>
    </n-tabs>
    <template v-if="tableData.length === 0">
      <div class="empty">
        <n-empty size="large" description="暂无数据~"></n-empty>
      </div>
    </template>
    <template v-else>
      <template v-if="isEdit">
        <n-button class="management-btn" @click="handEdit">取消</n-button>
        <n-button class="management-btn del-btn" @click="handOpenDel">
          删除
        </n-button>
      </template>
      <template v-else>
        <n-button class="management-btn" @click="handEdit">管理</n-button>
      </template>
      <div class="time-line">
        <n-timeline>
          <n-timeline-item
            v-for="item in tableData"
            :key="item.day"
            :title="item.day"
          >
            <template #icon>
              <div class="dot"></div>
            </template>
            <template #header>
              <div>
                <span class="line-title">{{ item.day }}</span>
                <n-checkbox
                  v-if="isEdit"
                  v-model:checked="item.allcheck"
                  @update:checked="allChange(item, $event)"
                />
              </div>
            </template>
            <n-checkbox-group
              v-model:value="item.checked"
              @update:value="checkChange(item, $event)"
            >
              <div class="imgs">
                <div
                  class="img hover-shadow"
                  v-for="(el, n) in item.list"
                  :key="n"
                >
                  <div class="check" v-if="isEdit">
                    <n-checkbox :value="el.id" label="" />
                  </div>
                  <img
                    class="cover"
                    :src="el.info.cover"
                    @click="handDetail(el)"
                    alt="图片"
                  />
                </div>
              </div>
            </n-checkbox-group>
          </n-timeline-item>
        </n-timeline>
      </div>
    </template>
    <confirm-dia ref="confirmRef" title="确定删除吗？" @confirm="handConfirm" />
  </div>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
import { deepClone } from '@/utils'
import logApi from '@/service/api/log'
import homeApi from '@/service/api/home'
const ConfirmDia = defineAsyncComponent(
  () => import('@/components/ConfirmDia.vue')
)
const classify = ref([
  {
    id: '',
    name: '全部'
  }
])
const router: any = useRouter()
const tabChange = (e: number) => {
  queryForm.value.categoryId = e
  queryData()
}
const queryData = () => {
  finish = false
  loading = false
  tableData.value = []
  queryForm.value.current = 1
  loadMore()
}
interface queryFormState {
  categoryId: string | number
  current: number
  size: number
}
const queryForm = ref<queryFormState>({
  categoryId: '',
  current: 1,
  size: 10
})
const handDetail = (e: any) => {
  router.push({
    path: e.info.book_type === 1 ? '/mhdetail' : '/detail',
    query: {
      id: e.info.id
    }
  })
}
/**
 *  管理
 * */
const isEdit = ref(false)
const handEdit = () => {
  isEdit.value = !isEdit.value
  if (!isEdit.value) {
    tableData.value.map((el: any) => {
      el.checked = []
      el.allcheck = false
      return el
    })
  }
}
const confirmRef = ref()
const handOpenDel = () => {
  const ids = deepClone(tableData.value)
    .map((el: any) => {
      return el.checked
    })
    .flat()
  if (ids.length === 0) {
    msgUtil.$message.error('请选择要删除的足迹')
    return
  }
  confirmRef.value.open()
}
const handConfirm = async () => {
  const ids = deepClone(tableData.value)
    .map((el: any) => {
      return el.checked
    })
    .flat()
  const { code, msg } = await logApi.dels({
    ids
  })
  if (code !== 0) {
    return msgUtil.$message.error(msg)
  }
  msgUtil.$message.success('已删除')
  queryData()
  handEdit()
}
const allChange = (e: any, status: boolean) => {
  if (status) {
    e.checked = deepClone(e.list).map((el: any) => {
      return el.id
    })
  } else {
    e.checked = []
  }
}
const checkChange = (e: any, arr: any) => {
  if (arr.length === e.list.length) {
    e.allcheck = true
  } else {
    e.allcheck = false
  }
}
/**
 *  分页加载
 * */
const tableData: any = ref([])
let loading = false
let finish = false
const loadMore = async () => {
  if (loading) return
  if (finish) return
  loading = true
  const params = deepClone(queryForm.value)
  const { data } = await logApi.list(params)
  data.data.map(el => {
    el.update_at = el.update_at.split(' ')[0]
    return el
  })
  if (params.current === 1) {
    tableData.value = []
  }
  data.data.forEach(item => {
    const index = tableData.value.findIndex(
      (el: any) => el.day === item.update_at
    )
    if (index >= 0) {
      tableData.value[index].list.push(item)
    } else {
      tableData.value.push({
        day: item.update_at,
        list: [item],
        checked: [],
        allcheck: false
      })
    }
  })
  if (data.records.length !== params.size) {
    finish = true
  }
  loading = false
}

const getClassify = async () => {
  const { data } = await homeApi.tabs()
  classify.value = [
    {
      id: '',
      name: '全部'
    },
    ...data
  ]
}
onMounted(() => {
  getClassify()
  queryData()
})
</script>

<style scoped lang="scss">
.footprint-page {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: 15px 24px;
  height: 100%;
  .empty {
    padding: 50px 0 150px 0;
  }
  .del-btn {
    margin-left: 10px;
  }
  .line-title {
    padding-right: 10px;
  }
  .management-btn {
    width: 68px;
    height: 28px;
    font-size: 14px;
  }
  .time-line {
    margin-top: 20px;
    .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #f1423d;
    }
    .imgs {
      margin-top: 15px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      .img {
        width: 199px;
        cursor: pointer;
        position: relative;
        .check {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 1;
        }
        .cover {
          width: 100%;
          aspect-ratio: 4/5.5;
          border-radius: 12px;
          object-fit: cover;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.footprint-page {
  .time-line {
    .n-timeline
      .n-timeline-item
      .n-timeline-item-content
      .n-timeline-item-content__title {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #333;
    }
  }
}
</style>
